<template>
    <div class="my-input-wrapper">
        <p v-if="label">{{label}}</p>
        <input class="input-content" v-model="value" @input="handleInput" type="text" :placeholder="placeholder">
    </div>
</template>

<script>
    export default {
        name: 'myInput',
        data() {
          return {
              value: ''
          }
        },
        props: {
            placeholder: {
                require: false
            },
            label: {
                type: String
            }
        },
        methods: {
            handleInput() {
                this.$emit('input', this.value)
            }
        }
    }
</script>

<style scoped>
    .my-input-wrapper {
        display: flex;
        height: .8rem;
        border-bottom: 1px solid #cecece;
        align-items: center;
        background: #fff;
    }
    .my-input-wrapper p {
        font-size: .36rem;
        color: #383838;
        box-sizing: border-box;
        padding-left: .2rem;
        flex: 1;
    }
    .my-input-wrapper .input-content {
        outline: none;
        border: none;
        width: 100%;
        padding-left: .2rem;
        font-size: .35rem;
        color: #383838;
        box-sizing: border-box;
        flex: 5;
    }
</style>
